// 导入axios
// import axios from 'axios'
export default {
  data () {
    return {
      usersList: [],
      total: 0,
      pagesize: 3,
      pagenum: 1,
      searchText: '',
      isShowUserAddDialog: false,
      // 添加用户表单数据
      userAddForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      userAddRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '用户名长度为3到6个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度为6-12个字符', trigger: 'blur' }
        ],
        email: [
          // pattern 表示使用正则表达式来校验
          /* eslint-disable no-useless-escape */
          { pattern: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/, message: '邮箱格式不正确', trigger: 'blur' }
        ],
        mobile: [
          { pattern: /^1[3|4|5|8]\d{9}$/, message: '手机格式不正确', trigger: 'blur' }
        ]
      },
      // 编辑用户数据 控制对话框的显示和隐藏
      isShowUserEditDialog: false,
      // 用户编辑比表单数据
      userEditForm: {
        username: '',
        email: '',
        mobile: '',
        id: -1
      },

      // 分配角色数据
      isShowUserRoleDialog: false,
      userRoleForm: {
        username: '',
        // 角色id
        rid: '',
        // 用户id
        id: -1
      },
      // 所有角色列表数据
      rolesList: []
    }
  },
  created () {
    this.getUsersList()

    // 获取所有角色列表
    this.getRoleList()
  },
  methods: {
    // 获取用户列表数据
    async getUsersList (pagenum = 1, query = '') {
      const url = '/users'
      const config = {
        params: {
        // 查询条件
          query,
          pagenum,
          pagesize: 3
        },
        // 添加请求头
        headers: {
          Authorization: localStorage.getItem('token')
        }

      }
      // await 等待 异步请求 完成
      // 异步操作完成后，将成功的结果交给了 变量 res
      const res = await this.$http.get(url, config)
      console.log(res)
      if (res.data.meta.status === 200) {
      // 获取数据成功
        this.usersList = res.data.data.users
        // 设置总条数
        this.total = res.data.data.total
        // 当前页码
        this.pagenum = res.data.data.pagenum
      } else {
        this.$router.push('/login')
        localStorage.removeItem('token')
      }
    },
    // 获取用户列表数据
    getUsersList1 (pagenum = 1, query = '') {
      this.$http.get('/users', {
        params: {
        // 查询条件
          query,
          pagenum,
          pagesize: 3
        },
        // 添加请求头
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        console.log(res)
        if (res.data.meta.status === 200) {
        // 获取数据成功
          this.usersList = res.data.data.users
          // 设置总条数
          this.total = res.data.data.total
          // 当前页码
          this.pagenum = res.data.data.pagenum
        } else {
          this.$router.push('/login')
          localStorage.removeItem('token')
        }
      })
    },
    // 页码改变时，获取该页数据
    changePage (curPage) {
      this.getUsersList(curPage, this.searchText)
    },
    // 查询数据
    search () {
      this.getUsersList(1, this.searchText)
    },
    // 删除数据
    async delUser (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 确认删除
        // 发送请求
        // const res = await this.$http.delete(`/users/${id}`, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // })
        const res = await this.$http.delete(`/users/${id}`)
        // 刷新页面
        this.getUsersList(1, this.searchText)
        //
        this.$message({
          type: 'success',
          message: res.data.meta.msg
        })
      } catch (err) {
        // 取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 切换用户状态
    async changeUserState (curUser) {
      // const res = await this.$http.put(`/users/${curUser.id}/state/${curUser.mg_state}`, null, {
      //   headers: {
      //     Authorization: localStorage.getItem('token')
      //   }
      // })
      const res = await this.$http.put(`/users/${curUser.id}/state/${curUser.mg_state}`)
      // 刷新列表数据
      this.getUsersList(1, this.searchText)
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    },
    // 展示添加用户对话框
    showUserAddDialog () {
      this.isShowUserAddDialog = true
    },
    // 添加用户
    async addUser () {
      try {
      // 1-先进行表单验证
      // 2-验证成功，在进行添加数据
        await this.$refs.userAddFormRef.validate()
        const res = await this.$http.post('/users', this.userAddForm)
        const {status, msg: message} = res.data.meta
        if (status === 201) {
        // 关闭对话框
          this.isShowUserAddDialog = false
          // 刷新列表数据
          this.getUsersList()
          // 展示提示信息
          this.$message({
            type: 'success',
            message
          })
        }
      } catch (e) {
        // console.log('表单验证失败')
      }
    },
    // 关闭添加用户对话框
    closeUserAddDialog () {
      // 重置表单
      this.$refs.userAddFormRef.resetFields()
    },
    // 展示用户编辑对话框
    showUserEditDialog (curUser) {
      this.isShowUserEditDialog = true
      // 给用户编辑表单提供数据
      for (let key in this.userEditForm) {
        this.userEditForm[key] = curUser[key]
      }
    },
    // 编辑用户
    async editUser () {
      const {email, mobile} = this.userEditForm
      const res = await this.$http.put(`/users/${this.userEditForm.id}`, {
        email,
        mobile
      })
      // const res = await this.$http.put(`users/${this.userEditForm.id}`, {
      //   email: this.userEditForm.email,
      //   mobile: this.userEditForm.mobile
      // })
      // console.log(res)
      // 编辑成功后 关闭对话框
      this.isShowUserEditDialog = false
      // 2-刷新列表数据
      this.getUsersList(1, this.searchText)
      // 3-提示更新成功
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    },
    // 展示分配角色对话框
    async showUserRole (curUser) {
      // 展示对话框
      this.isShowUserRoleDialog = true

      // 选中角色列表
      // 说明：当前用户数据中没有 角色id 值，所以，需要重新获取当前用户的角色id
      const res = await this.$http.get(`/users/${curUser.id}`)
      this.userRoleForm.rid = res.data.data.rid === -1 ? '' : res.data.data.rid

      // 展示用户名称
      this.userRoleForm.username = curUser.username
      // 暂存用户 id
      this.userRoleForm.id = curUser.id
    },
    // 获取所有角色列表
    async getRoleList () {
      const res = await this.$http.get('/roles')
      console.log(res)
      this.rolesList = res.data.data
    },

    // 分配角色
    async assignRole () {
      const { id, rid } = this.userRoleForm
      const res = await this.$http.put(`/users/${id}/role`, {
        rid
      })

      // 关闭对话
      this.isShowUserRoleDialog = false
      // 刷新列表数据
      this.getUsersList(1, this.searchText)
      // 提示
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    }
  }
}
